/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Cell, Table, TableBody, TableRow,
} from "customize-easy-ui-component";
import {DirectLink} from "../../../routing/Link";
import Img_Seal from "../../../images/seal.png";

export const ConclusionValvVw= ({orc, rep,cap} :{orc:any, rep:any,cap?:string}
) => {
  return <>
    <Table fixed={ ["5%","4%","%","5%","11%","10%","16%"] }  css={ {borderCollapse: 'collapse' } } tight  miniw={800}>
      <TableBody>
        <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/Conclusion`}>
          <TableRow>
            <CCell colSpan={2}>执行标准</CCell>
            <CCell colSpan={5}>TSG ZF001-2006《安全阀安全技术监察规程》</CCell>
          </TableRow>
          <TableRow>
            <CCell colSpan={2}>维护检修情况说明</CCell>
            <Cell split={true} colSpan={5}><div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>
              {orc.建议 || '／'}
            </div></Cell>
          </TableRow>
          <TableRow>
            <CCell colSpan={2}>校验结果</CCell>
            <CCell colSpan={5}>{orc.校验结论 || '／'}</CCell>
          </TableRow>
          <TableRow>
            <Cell split={true} colSpan={7}><div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>备注：
              {orc.大备注 || '／'}
            </div></Cell>
          </TableRow>
          <TableRow>
            <CCell colSpan={2}>校验日期</CCell>
            <CCell colSpan={1}>{orc.检验日期 || '／'}</CCell>
            <CCell colSpan={2}>下次检验日期</CCell>
            <CCell colSpan={2}>{orc.新下检日 || '／'}</CCell>
          </TableRow>
        </DirectLink>
        <TableRow>
          <CCell>{cap??'检验'}</CCell>
          <CCell colSpan={2}>{orc.检验人IDs}</CCell>
          <CCell>日期</CCell>
          <CCell>{orc.编制日期}</CCell>
          <CCell  rowSpan={3} colSpan={2}>
            <div css={{
              height: '100%',   //'8rem',窄屏幕问题
              '::before': {
                filter: 'opacity(30%)',
                width: '100%',
                height: '100%',
                backgroundImage: `url(${Img_Seal})`,
                content: '" "',
                position: 'absolute',
                top: 0,
                left: 0,
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
              }
            }}>
              <Table  fixed={ ["40%","%"]  }
                      css={ {borderCollapse: 'collapse',height:'fill-available'} }>
                <TableBody>
                  <TableRow>
                    <CCell css={{border:'none'}}>机构核准证号：</CCell>
                    <CCell css={{border:'none'}}>{rep?.isp?.ispu?.agency?.apno}</CCell>
                  </TableRow>
                  <TableRow>
                    <CCell css={{border:'none'}} colSpan={2}>（检验机构公章或者检验专用章）</CCell>
                  </TableRow>
                  <TableRow>
                    <CCell css={{border:'none'}}>日期：</CCell>
                    <CCell css={{border:'none'}}>2022-01-01</CCell>
                  </TableRow>
                </TableBody>
              </Table>
            </div>
          </CCell>
        </TableRow>
        <TableRow >
          <CCell>审核</CCell>
          <CCell colSpan={2}> </CCell>
          <CCell>日期</CCell>
          <CCell> </CCell>
        </TableRow>
        <TableRow >
          <CCell>批准</CCell>
          <CCell colSpan={2}></CCell>
          <CCell>日期</CCell>
          <CCell></CCell>
        </TableRow>
      </TableBody>
    </Table>
  </>;
};
